<template>
  <div class="recent-container scroll-container">
    <Tab
      active="song"
      @getActive="getActive">
      <template #content>
        <el-tab-pane
          :label="`歌曲 ${recentPlay.length}`"
          name="song">
          <div class="operation">
            <PlayButton :songs="recentPlay" />
            <DecoratedButton
              icon="&#xf0304;"
              name="下载" />
            <DecoratedButton
              icon="&#xe617;"
              name="批量操作" />
            <SearchButton @getContent="getContent" />
          </div>
          <SongList
            :songs="content ? copy : recentPlay"
            :isPlaylist="true"
            height="420px" />
          <p class="tip">自动同步该账号下最近一周播放的歌曲</p>
        </el-tab-pane>
        <el-tab-pane
          :label="`视频 ${recentVideo.length}`"
          name="video ">
          <Mv :mvs="recentVideo" />
        </el-tab-pane>
      </template>
    </Tab>
  </div>
</template>

<script lang="ts" setup>
import { ref, reactive, inject, Ref } from 'vue';
import { Song, MV } from '../model';
import { getUserRencent, getUserRecentVideo } from '../api/api';
import {
  elMessage,
  getMusicInfos,
  getMusicUrls,
  getStorage,
  getTheme,
} from '../utils/util';
import { elMessageType, storageType } from '../model/enum';
import Tab from '../components/Tab.vue';
import PlayButton from '../components/PlayButton.vue';
import DecoratedButton from '../components/DecoratedButton.vue';
import SongList from '../components/SongList.vue';
import SearchButton from '../components/SearchButton.vue';
import Mv from '../components/Mv.vue';

//配置主题
const color = getTheme().get('fontColor');

//加载动画

//获取用户uid
const uid = getStorage(storageType.SESSION, 'userInfo')?.uid;

//最近播放列表
const recentPlay = reactive<Song[]>([]);

//最近播放的视频
const recentVideo = reactive<MV[]>([]);

//搜索的副本
let copy: any;

//搜索的内容
const content = ref<string>('');

//第一次加载的动画
const first = inject<Ref<boolean>>('firstLoading');
first!.value = true;
//设置隐藏滚动条
const hideScroll = inject('hideScroll') as Function;

//搜索
const getContent = (search: string) => {
  copy = reactive<Song[]>([]);
  content.value = search;
  const result = recentPlay.filter(
    (song) =>
      song.name.includes(content.value) ||
      song.album.includes(content.value) ||
      song.singer.includes(content.value)
  );
  copy.push(...result);
};

//获取当前活跃的tab
const getActive = () => {
  hideScroll();
};

//获取用户最近播放的音乐
getUserRencent(uid)
  .then((response: any) => {
    const { weekData } = response;
    if (weekData) {
      const ids: string[] = [];
      weekData.forEach((item: any) => {
        getMusicInfos(ids, recentPlay, item.song);
      });
      getMusicUrls(ids.join(','), recentPlay);
    }
    first!.value = false;
  })
  .catch((err: any) => {
    elMessage(elMessageType.ERROR, err.message);
  });
//获取用户最近播放的视频
getUserRecentVideo()
  .then((response: any) => {
    const {
      data: { videos },
    } = response;
    if (videos) {
      videos.forEach((mv: any) => {
        const { id, text, coverUrl } = mv.mlogBaseData;
        recentVideo.push({
          id,
          name: text,
          image: coverUrl,
          artist: '',
          playCount: '',
        });
      });
    }
  })
  .catch((err: any) => {
    elMessage(elMessageType.ERROR, err.message);
  });
</script>

<style lang="less" scoped>
@font-color: v-bind(color);
@font-color-gray: #7b7b7b;
@font-color-green: #1ed2a9;
.recent-container {
  .tab {
    &:deep(.el-tabs__item) {
      font-size: 14px;
      letter-spacing: 0px;
    }
    &:deep(.el-tabs__active-bar) {
      left: 13px;
      width: 30px !important;
      height: 3px;
      border-radius: 1.5px;
    }
  }

  .mv {
    width: 80vw;
    &:deep(.mv-simi) {
      width: 80vw;
    }
    &:deep(.mv-recommend) {
      width: 232px;
    }
  }
  .operation {
    margin: 15px 0 15px 10px;
    &:deep(.el-button) {
      width: 110px;
    }
    position: relative;
    .search-area {
      position: absolute;
      top: 0;
      right: 30px;
    }
  }
  .tip {
    font-size: 14px;
    color: @font-color-gray;
    margin-left: 10px;
  }
}
</style>
